<template>
  <div id="aside">
    <el-row>
      <el-col :span="8">{{ $t('Aside.Order') }}</el-col>
      <el-col :span="16" :style="styleCodeFontSize">{{
        props.saleorder.SaleOrderNo
      }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="8">{{ $t('Aside.Style') }}</el-col>
      <el-col :span="16" :style="styleCodeFontSize">{{
        props.saleorder.StyleCode
      }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="12">{{ $t('Aside.Order_Qty') }}</el-col>
      <el-col :span="12">{{ props.saleorder.SoQuantity }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="12">{{ $t('Aside.Finished') }}</el-col>
      <el-col :span="12">{{ props.saleorder.CSewQuantity }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="12">{{ $t('Aside.Date') }}</el-col>
      <el-col :span="12">{{ props.saleorder.FinishedDate }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="12">{{ $t('Aside.Today_Target') }}</el-col>
      <el-col :span="12">{{ props.saleorder.TargetQuantity }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="12">{{ $t('Aside.Today_Output') }}</el-col>
      <el-col :span="12">{{ props.saleorder.CSewTodayQuantity }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="12">{{ $t('Aside.Inline_Rate') }}</el-col>
      <el-col :span="12">{{ props.saleorder.QC6Percent }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="12">{{ $t('Aside.Endline_Rate') }}</el-col>
      <el-col :span="12">{{ props.saleorder.QC9Percent }}</el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ISaleOrder } from '@/interface/index';
import { computed } from 'vue';

const props = defineProps<{
  saleorder: ISaleOrder;
}>();
const styleCodeFontSize = computed(() => {
  if (props.saleorder.StyleCode.length > 9) return { 'font-size': '3em' };
  else return { 'font-size': '4em' };
});
</script>

<style lang="scss" scoped>
div#aside {
  height: 100%;
}
.el-row {
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  height: 11%;
  text-align: center;
  color: #ffffff;
  &:last-child {
    border-bottom: 1px solid;
  }
  .el-col {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: xx-large;
    &:first-child {
      border-right: 1px solid;
    }
  }
}
</style>
@/types
